<div class="main-wrap" style="background-color: #FFFFFF;">
	<div class="points">
		<!--标题 -->
		<div class="am-cf am-padding">
			<div class="am-fl am-cf"><strong class="am-text-danger am-text-lg">我的积分</strong> / <small>My&nbsp;Point</small></div>
		</div>
		<hr/>
		<div class="pointsTitle">
			<div class="usable">可用积分<span id="shiyu">120</span></div>
			<div class="pointshop">
				<a href="#"><i><img src="../images/u5.png" /></i>积分商城</a>
			</div>
			<!--<div class="signIn"><a href="#"><i class="am-icon-calendar"></i><em>+5</em>每日签到</a></div>-->
		</div>
		<div class="pointlist am-tabs" data-am-tabs>
			<ul class="am-avg-sm-3 am-tabs-nav am-nav am-nav-tabs">
				<li class="am-active">
					<a href="#tab1">全部</a>
				</li>
				<li>
					<a href="#tab2">获得</a>
				</li>
				<li>
					<a href="#tab3">支出</a>
				</li>
			</ul>
			<div class="am-tabs-bd" style="width: 100%;">
				<div class="am-tab-panel am-fade" id="tab1" >
					<!--<table id="list2" style="width: 100%;"></table>
						<div id="pager2"></div>-->
					<table style="margin-top: -30px;">

						<b></b>
						<thead>
							<tr>
								<th class="th1" >积分详情</th>
								<th class="th2" >积分变动</th>
								<th class="th3" >日期</th>
							</tr>
						</thead>
						<tbody id="xiangqi">

						</tbody>
					</table>
				</div>
				<div class="am-tab-panel am-fade" id="tab2">
					<table style="margin-top: -30px;">
						<b></b>
						<thead>
							<tr>
								<th class="th1">积分详情</th>
								<th class="th2">获取积分</th>
								<th class="th3">日期</th>
							</tr>
						</thead>
						<tbody id="gain">
							<!--<tr>
								<td class="pointType">订单号7745926347132商品评论</td>
								<td class="pointNum">+2</td>
								<td class="pointTime">2016-03-12&nbsp09:32</td>
							</tr>-->
						</tbody>
					</table>
				</div>
				<div class="am-tab-panel am-fade" id="tab3">
					<table style="margin-top: -30px;">
						<b></b>
						<thead>
							<tr>
								<th class="th1">积分详情</th>
								<th class="th2">消耗积分</th>
								<th class="th3">日期</th>
							</tr>
						</thead>
						<tbody id="expend">
							<!--<tr>
								<td class="pointType">积分兑换</td>
								<td class="pointNum">-300</td>
								<td class="pointTime">2016-03-10&nbsp15:27</td>
							</tr>-->
						</tbody>
					</table>
				</div>

			</div>

		</div>
	</div>
</div>
<script type="text/javascript">
	$(document).ready(function() {
		$.get("/api/point/points/" + 1 + "", function(data) {
			//console.log(data.points)
			$.each(data.points, function(i, v) {
				//console.log(v.particulars)
				$("#xiangqi").append("<tr><td class='pointType'>" + v.particulars + "</td><td class='pointNum'>" + v.points + "</td><td class='pointTime'>" + v.creat_time + "</td></tr>");
			});
		});
		
		$.get("/api/point/pointsG/" + 1 + "", function(data) {
			$.each(data.gain, function(i, v) {
				//console.log(v)
				$("#gain").append("<tr><td class='pointType'>" + v.particulars + "</td><td class='pointNum'>" + v.points + "</td><td class='pointTime'>" + v.creat_time + "</td></tr>");
			});
		});
			$.get("/api/point/pointsE/" + 2 + "", function(data) {
			$.each(data.expend, function(i, v) {
				//console.log(v)
				$("#expend").append("<tr><td class='pointType'>" + v.particulars + "</td><td class='pointNum'>" + v.points + "</td><td class='pointTime'>" + v.creat_time + "</td></tr>");
			});
		});
	});
	/*$(function(){
		//页面加载完成之后执行
		pageInit();
	});

	function pageInit(){
		//创建jqGrid组件
		jQuery("#list2").jqGrid(
				{
					url : '/api/point/points/"+1+"',//组件创建完成之后请求数据的url
					datatype : "json",//请求数据返回的类型。可选json,xml,txt
					colNames : [ '积分详情', '积分变动', '日期'],//jqGrid的列显示名字
					colModel : [ //jqGrid每一列的配置信息。包括名字，索引，宽度,对齐方式.....
					             {name : 'particulars',index : 'particulars',width : 150}, 
					             {name : 'points',index : 'points',width : 50}, 
					             {name : 'creat_time',index : 'creat_time',width : 100}
					           ],
					rowNum : 10,//一页显示多少条
					rowList : [ 10, 20, 30 ],//可供用户选择一页显示多少条
					pager : '#pager2',//表格页脚的占位符(一般是div)的id
					sortname : '积分详情',//初始化的时候排序的字段
					sortorder : "desc",//排序方式,可选desc,asc
					mtype : "post",//向后台请求数据的ajax的类型。可选post,get
					viewrecords : true,
					caption : ""//表格的标题名字
				});
		/*创建jqGrid的操作按钮容器*/
	/*可以控制界面上增删改查的按钮是否显示*/
	//jQuery("#list2").jqGrid('navGrid', '#pager2', {edit:false,add:false,del:false});
	//}*/
</script>